<template>
  <div
    class="control"
    :style="{ visibility: this.show ? 'visible' : 'hidden' }"
  >
    <book-header
      class="header"
      bgc="#404040"
      fc="#fff"
      :style="{
        opacity: this.show ? 1 : 0,
        transform: this.show ? 'transilateY(0)' : 'transilateY(-100%)',
      }"
      >{{ title }}</book-header
    >

    <footer
      class="footer"
      :style="{
        opacity: this.show ? 1 : 0,
        transform: this.show ? 'transilateY(0)' : 'transilateY(100%)',
      }"
      @click.stop
    >
      <div class="btn" @click="prev">上一章</div>
      <div class="btn" @click="showMulu">目录</div>
      <div class="btn" @click="next">下一章</div>
    </footer>
  </div>
</template>

<script>
import bookHeader from "./bookHeader.vue";
export default {
  components: { bookHeader },
  props: {
    title: {
      type: String,
      default: "阅读",
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    clickHide() {
      this.$parent.menuisShow = false;
    },
    showMulu() {
      this.$emit("showMenu", true);
    },
    next() {
      this.$emit("goNext");
    },
    prev() {
      this.$emit("goPrev");
    },
  },
};
</script>

<style>
.header,
.footer {
  transition: transform 1s linear;
}
footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  background-color: #404040;
  z-index: 9;
}
.btn {
  height: 50px;
  line-height: 50px;
  color: #fff;
}
</style>